<template>
  <div class="container">
    <span>数据统计</span>
    <div class="topbox">
      <div class="topboxitem" v-for="(item, index) in cardList" :key="index"
        :style="{ backgroundImage: 'url(' + item.bc + ')' }">
        <img :src="item.Icon" alt="" style="
            width: 88px;
            height: 88px;
            position: absolute;
            top: 45px;
            right: 31px;
          " />
        {{ item.name }}
        <h2>{{ item.num }}</h2>
        <span style="color: #999; font-size: 14px">较昨天：</span><span :class="item.Compare ? 'red' : 'green'"
          style="margin-right: 10px">{{ item.CompareNum }}</span>
        <img v-if="!item.Compare" src="../../assets/images/dataStatisticsdown.png" alt="" />
        <img v-if="item.Compare" src="../../assets/images/dataStatisticsup.png" alt="" />
      </div>
    </div>
    <div class="chartbox" v-if="this.Idtype == 0">
      <div class="chartitem">
        <div ref="echartsContainer" class="echarts"></div>
      </div>
      <div class="chartitem">
        <div ref="echartsContainer2" class="echarts"></div>
      </div>
      <div class="chartitem">
        <span>代理商排行</span>
        <el-table :data="tableData" height="350" style="width: 100%;  ">
          <el-table-column label="商家名称" prop="agentName"></el-table-column>
          <el-table-column prop="rechargeAmount" label="充值金额" sortable>
          </el-table-column>
          <el-table-column prop="spendAmount" label="消费金额" sortable>
          </el-table-column>
        </el-table>
      </div>
      <div class="chartitem">
        <span>商家排行</span>
        <el-table :data="tableData2" height="350" style="width: 100%;  ">
          <el-table-column label="商家名称" prop="storeName"></el-table-column>
          <el-table-column prop="rechargeAmount" label="充值金额" sortable>
          </el-table-column>
          <el-table-column prop="spendAmount" label="消费金额" sortable>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="chartbox" v-if="this.Idtype == 1">
      <div class="chartitem" style="width: 100%;">
        <div ref="echartsContainer" class="echarts"></div>
      </div>
      <div class="chartitem">
        <div ref="echartsContainer2" class="echarts"></div>
      </div>

      <div class="chartitem">
        <span>商家排行</span>
        <el-table :data="tableData2" height="350" style="width: 100%;  ">
          <el-table-column label="商家名称" prop="storeName"></el-table-column>
          <el-table-column prop="rechargeAmount" label="充值金额" sortable>
          </el-table-column>
          <el-table-column prop="spendAmount" label="消费金额" sortable>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getStatisticsSurvey, getAgentRank, storeRank, getStatisticsOrder, getTotal, getType } from "@/api/dataStatistics/dataStatistics.js";
export default {
  name: "dataStatistics",
  data() {
    return {
      startTime: this.$moment().subtract(3, 'days').format('YYYY-MM-DD'),
      endTime: this.$moment().format('YYYY-MM-DD'),
      echarts1: null,
      echarts2: null,
      tableData: [],
      tableData2: [],
      cardList: [
        {
          bc: require("../../assets/images/dataStatistics1.png"),
          name: "商家数量",
          num: "5,250",
          CompareNum: 220,
          Compare: true,
          Icon: require("../../assets/images/商家@2x.png"),
        },
        {
          bc: require("../../assets/images/dataStatistics2.png"),
          name: "代理商数量",
          num: "25,250",
          CompareNum: 520,
          Compare: false,
          Icon: require("../../assets/images/代理商@2x.png"),
        },
        {
          bc: require("../../assets/images/dataStatistics3.png"),
          name: "订单数量",
          num: "125,250",
          CompareNum: 331,
          Compare: true,
          Icon: require("../../assets/images/数量@2x.png"),
        },
        {
          bc: require("../../assets/images/dataStatistics4.png"),
          name: "充值金额",
          num: "1,252",
          CompareNum: 200,
          Compare: true,
          Icon: require("../../assets/images/充值金额@2x.png"),
        },
      ],
      onexdata: [],
      oneydata: [],
      legenddata: [],
      twoxdata: [],
      twoydata: [],
      colorList: ['#757e9c', "#51adff", "#5ed4d5"],
      Idtype: '',
    };
  },
  mounted() {
    // 背调接口统计
    this.getStatisticsSurvey();
    // 背调订单统计
    this.getStatisticsOrder();

    this.getInfo();
    getType().then(res => {
      this.Idtype = res.data.type
    });
    // 代理商,商家排行榜
    this.getRank();
    if (this.Idtype == 1) {
      this.getstoreRank();
    }

  },
  methods: {
    initChart() {
      this.echarts1 = echarts.init(this.$refs.echartsContainer);
      this.echarts1.setOption({
        title: {
          text: "背调订单统计",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.onexdata,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.oneydata,
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#369eff",
            },
            areaStyle: {
              color: "#f0f8ff",
            },
          },
        ],
      });
    },
    initChart2() {
      this.echarts2 = echarts.init(this.$refs.echartsContainer2);
      this.echarts2.setOption({
        title: {
          text: "背调接口统计",
        },
        grid: {
          top: '4%'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: this.legenddata,
          top: "7%"
        },
        xAxis: {
          type: "category",
          data: this.twoxdata
        },
        yAxis: {
          type: "value",
        },
        series:
          this.twoydata
      });

    },
    // 接口统计
    getStatisticsSurvey() {
      this.legenddata = []
      this.twoxdata = []
      this.twoydata = []
      getStatisticsSurvey({
        startTime: this.startTime,
        endTime: this.endTime,
      }).then(res => {
        res.data.list[0].surveyData.forEach(item => {
          this.legenddata.push(item.surveyName)
        })
        res.data.list.forEach((item) => {
          this.twoxdata.push(this.$moment(item.date).format('YYYY-MM-DD'))
        })
        let serieslist = []
        let alist = []
        for (let i = 0; i < this.legenddata.length; i++) {
          alist = []
          for (let j = 0; j < res.data.list.length; j++) {
            res.data.list[j].surveyData.forEach(item => {
              if (item.surveyName == this.legenddata[i]) {
                alist.push(item.surveyNum)
              }
            })
          }
          serieslist.push(alist)
        }
        for (let i = 0; i < this.legenddata.length; i++) {
          this.twoydata.push({
            name: this.legenddata[i],
            type: "bar",
            data: serieslist[i],
            stack: "总量",
            itemStyle: { color: this.colorList[i] },
          })
        }
        this.$nextTick(() => {
          this.initChart2()
        })
      })
    },
    // 背调订单统计
    getStatisticsOrder() {
      this.onexdata = []
      this.oneydata = []
      getStatisticsOrder({
        startTime: this.startTime,
        endTime: this.endTime,
      }).then(res => {
        res.data.list.forEach((item) => {
          this.onexdata.push(this.$moment(item.orderTime).format('YYYY-MM-DD'))
          this.oneydata.push(item.orderNum)
        })
        this.$nextTick(() => {
          this.initChart()
        })
      })

    },
    // 代理商排行榜
    getRank() {
      getAgentRank().then(res => {
        this.tableData = res.data.RechargeRankAcsList
      })

    },
    getstoreRank() {
      storeRank().then(res => {
        this.tableData2 = res.data.allStoreRechargeRankAsc
      })
    },
    getInfo() {
      getTotal().then(res => {
        this.cardList[0].num = res.data.totalAgent
        this.cardList[0].CompareNum = res.data.totalAgentChange
        this.cardList[1].num = res.data.totalAmount
        this.cardList[1].CompareNum = res.data.totalAmountChange
        this.cardList[2].num = res.data.totalOrder
        this.cardList[2].CompareNum = res.data.totalOrderChange
        this.cardList[3].num = res.data.totalStore
        this.cardList[3].CompareNum = res.data.totalStoreChange
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 16px 18px;
  padding: 10px 15px;

  .topbox {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    justify-content: center;

    .topboxitem {
      width: calc(25% - 10px);
      margin: 0 5px;
      height: 180px;
      background-size: cover;
      background-position: center;
      padding: 30px;
      position: relative;
    }
  }

  .chartbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    justify-content: center;

    .chartitem {
      width: calc(50% - 10px);
      margin: 5px;
      height: 400px;
      padding: 10px;
      background-color: #ffffff;

      span {
        font-weight: 700;
        font-size: 20px;
      }
    }
  }
}

.red {
  color: #d81e06;
}

.green {
  color: #05a918;
}

.echarts {
  width: 100%;
  height: 400px;
}

/* 隐藏伪元素 */
::v-deep.el-table::before {
  display: none !important;
}

/* 重现下自带下边框线 */
.el-table--border {
  border-bottom: 1px solid #fff !important;
}
</style>